<template>
  <div class="monitor">
    <div class="monitor-box">
      <!--      这里可以替换直播 -->
      <el-row style="height: 100%" :gutter="12">
        <el-col :span="layout.left" style="height: 100%">
          <div  style="height: 100%;justify-content: space-between;display: flex;flex-direction: column">
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="layout.middle" style="height: 100%">
          <div class="default_bg">
            <div class="drone-list" style="display: none">
             <div class="drone-list-box">
              <el-scrollbar>
                <el-row :gutter="15" style="height: 100%">
                  <el-col :span="12" v-for="item in droneList">
                    <div class="drone-item">
                      <div class="del-icon">
                        <el-icon size="16" color="#fff"><Delete /></el-icon>
                      </div>
                      <div class="status" v-if="item.statusName">
                        {{ item.statusName }}
                      </div>
                      <div class="f-g" style="height: 100px">
                        <img src="@/assets/uav2.png" alt="">
                      </div>
                      <div class="drone-name">{{ item.name }}</div>
                    </div>
                  </el-col>
                </el-row>
              </el-scrollbar>
             </div>
            </div>
            <div class="tool">
              <div class="tool-item" v-for="item in toolList" :key="item.name" @click="handleControl(item.name)">
                <img :src="item.icon" alt="" />
              </div>
            </div>
            <div class="control">
              <div class="control-left">
                <div class="refresh-icon"></div>
                <div :class="['wifi-icon', 'wifi-icon-' + control.wifi]"></div>
                <div class="control-text">
                  在线无人机：<span class="green">{{ control.drone }}</span> 丨 在线机场：<span class="red">{{ control.airport }}</span>
                </div>
              </div>
              <div class="control-right f-r a-c">
                <div class="control-text">
                  无人机经纬度：<span class="green2">{{ control.longitude }}</span>丨 无人机高度：<span class="green2">{{ control.height }}</span> 丨 无人机电量：<span class="green2">{{ control.battery }}%</span> 丨 无人机速度：<span class="green2">{{ control.speed }}km/h</span>
                </div>
                <div class="f-r a-c" style="margin-left: 20px">
                  <div class="refresh-icon all1" @click="layout1"></div>
                  <div class="refresh-icon all2"  @click="layout2"></div>
                  <div class="refresh-icon all"  @click="layout3"></div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="layout.right" style="height: 100%">
          <div  style="height: 100%;justify-content: space-between;display: flex;flex-direction: column">
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
            <div class="layout-item">
              <img style="height: 100%;width: 100%" src="@/assets/monitor/default_item.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="dialog" v-if="isShowControl" @close="isShowControl = false">
        <CloudPlatform @close="isShowControl = false"/>
      </div>
      <div class="dialog" v-if="isShowDetail" @close="isShowDetail = false">
        <UavDetail @close="isShowDetail = false"/>
      </div>
      <div class="dialog" v-if="isShowFly" @close="isShowFly = false">
        <Fly @close="isShowFly = false"/>
      </div>
    </div>
  </div>
</template>
<script setup>
import CloudPlatform from './cloudPlatform.vue'
import UavDetail from '../project/uavProject/detail'
import Fly from './fly'
import {ref} from "vue";
import {ElMessage} from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
const toolList = ref([
  {
    name: '切换',
    icon: require('@/assets/monitor/switch.png'),
  },
  {
    name: '操控',
    icon: require('@/assets/monitor/control.png'),
  },
  {
    name: '详情',
    icon: require('@/assets/monitor/detail.png'),
  },
  {
    name: '分享',
    icon: require('@/assets/monitor/share.png'),
  }
])

const control = ref({
  wifi: 1,
  drone: 1,
  airport: 59,
  // 经纬度
  longitude: 0,
  latitude: 0,
  // 高度
  height: 2000,
  // 电量
  battery: 59,
  // 速度
  speed: 100
})

const layout = ref({
  left: 0,
  middle: 24,
  right: 0
})
const layout1 = () => {
  layout.value = {
    left: 4,
    middle: 16,
    right: 4
  }
}
const layout2 = () => {
  layout.value = {
    left: 0,
    middle: 18,
    right: 6
  }
}
const layout3 = () => {
  layout.value = {
    left: 0,
    middle: 24,
    right: 0
  }
}

if (route.query.layout) {
  if (route.query.layout === '1') {
    layout1()
  } else if (route.query.layout === '2') {
    layout2()
  } else {
    layout3()
  }
}
const isShowControl = ref(false)
const isShowDetail = ref(false)
const isShowFly = ref(false)
const handleControl = (name) => {
  console.log(name)
  if(name === '操控') {
    // isShowControl.value = !isShowControl.value
    router.push({
      path: '/monitor/cloudPlatform'
    })
  } else if(name === '切换') {
    console.log('切换')
    // isShowFly.value = !isShowFly.value
    router.push({
      path: '/monitor/fly'
    })

  } else if(name === '详情') {
    // isShowDetail.value = !isShowDetail.value
    console.log('详情')
    router.push({
      path: '/uavProject/detail'
    })
  } else if(name === '分享') {
    ElMessage.success('分享成功')
    console.log('分享')
  }
}
// 无人机列表
const droneList = ref([
  { name: '无人机1', statusName: '飞行中'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
  { name: '无人机1'},
])
</script>
<style lang="scss">
.monitor {
  width: 100%;
  height: 100%;
  padding: 20px;
  .monitor-box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    .layout-item {
      height: 24%;
    }
  }
  .default_bg {
    background-image: url("~@/assets/monitor/monitor.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    .drone-list {
      position: absolute;
      width: 460px;
      height: 100%;
      left: 0;
      top: 0;
      padding: 20px;
      padding-bottom: 100px;
      overflow: hidden;
      .drone-list-box {
        height: 100%;
        background: rgba(0,0,0,0.3);
        border-radius: 10px;
        overflow: hidden;
        .el-scrollbar {
          padding: 5px 15px;
          .el-scrollbar__bar.is-horizontal  {
            display: none !important;
          }
        }
        .drone-item {
          height: 145px;
          background: #FFFFFF;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          margin-top:7px;
          margin-bottom: 7px;
          position: relative;
          .del-icon {
            position: absolute;
            left: 10px;
            top: 10px;
            cursor: pointer;
            z-index: 9;
          }
          .status {
            position: absolute;
            right: 0;
            top: 0;
            width: 80px;
            height: 28px;
            background: rgba(0,0,0,0.1);
            border-radius: 0px 8px 0px 26px;
            line-height: 28px;
            text-align: center;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px 10px 0px 0px;
            overflow: hidden;
          }
          .drone-name {
            height: 32px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #1A1A1A;
            line-height: 32px;
            padding: 0 20px;
          }
        }
      }
    }
    .tool {
      position: absolute;
      top: 30px;
      right: 30px;
      padding:11px 20px 11px 0;
      background: rgba(0,0,0,0.1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      .tool-item {
        cursor: pointer;
        margin-left: 20px;
        width: 36px;
        height: 36px;
        img {
          width: 36px;
          height: 36px;
        }
      }
    }
    .control {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0,0.3);
      border-radius: 0px 0px 10px 10px;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .control-text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 24px;
        .green {
          color: #27FF45
        }
        .red {
          color: #FF2020
        }
        .green2 {
          color: #17BDB2;
        }
      }
      .control-left {
        display: flex;
        align-items: center;
        .wifi-icon {
          width: 24px;
          height: 18px;
          margin-right: 10px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .wifi-icon-1 {
          background-image: url("~@/assets/monitor/wifi-1.png");
        }
        .wifi-icon-2 {
          background-image: url("~@/assets/monitor/wifi-2.png");
        }
        .wifi-icon-3 {
          background-image: url("~@/assets/monitor/wifi-3.png");
        }
        .wifi-icon-4 {
          background-image: url("~@/assets/monitor/wifi-4.png");
        }
      }
      .refresh-icon {
        width: 20px;
        height: 18px;
        margin-right: 20px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("~@/assets/monitor/refresh.png");
        cursor: pointer;
      }
      .all {
        background-image: url("~@/assets/monitor/all.png");
      }
      .all1 {
        background-image: url("~@/assets/monitor/all1.png");
      }
      .all2 {
        background-image: url("~@/assets/monitor/all2.png");
      }
    }
  }
}
.dialog {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 999;
}
</style>
